<template>
  <el-main class="bg table_wrap feedback_on_opinions">
    <div class='div-form'>
      <el-form ref="elFormRef" :model="formInline" label-width="90px" :style="{ width: '100%' }" label-position="left">
        <el-row :gutter="20">
						<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="反馈标题">
								<el-input v-model="formInline.feedback_title"></el-input>
							</el-form-item>
			</el-col>
																																				        </el-row>
      </el-form>
    </div>
    <baseTable :tableColumns="columns" requestApi='/api/feedback_on_opinions/get_list' :isShowSelect="true" :vm="vm"
               v-model:isRefresh="isRefresh" :otherParams="formInline"
               @handleSelectionChange="handleSelectionChange"
               @handleCurrentChangeNew="handleCurrentChangeNew"
    >
      <!-- 头部按钮 -->
      <template #baseHeadFunt>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(true)">重置</el-button>
        <el-button
            v-if="$check_action('/feedback_on_opinions/table','del') || $check_action('/feedback_on_opinions/view','del')"
            class="search_btn_del" type="danger" @click="delInfo()">删除
        </el-button>
      </template>
      <!-- 操作 -->
      <template #baseTableFunt="{ scope }">
        <el-button type="primary" v-if="user_group == '管理员' || $check_action('/feedback_on_opinions/table','set')" size="small"
                    @click="router.push('./view?feedback_on_opinions_id='+scope.row.feedback_on_opinions_id)">详情
        </el-button>
      </template>
      <template #baseTableFunt2="{ scope }">
        <el-button type="primary" v-if="user_group == '管理员' || $check_action('/feedback_on_opinions/table','set')" size="small"
            @click="router.push('./view?feedback_on_opinions_id='+scope.feedback_on_opinions_id)">详情
        </el-button>
      </template>
      <template #tableContent="{ scope, column }">
                            <span v-if="column.prop === 'feedback_to_users'">{{ scope.row['feedback_to_users']?getObj(list_user_feedback_to_users,scope.row['feedback_to_users']).nickname+"-"+getObj(list_user_feedback_to_users,scope.row['feedback_to_users']).username:"" }}</span>
                                  <span v-if="column.prop === 'upload_credentials'">
        <el-image
            :preview-teleported="true"
            style="width: 60px; height: 60px"
            :src="$fullUrl($banseUrl,scope.row.upload_credentials)"
            :preview-src-list="[$fullUrl($banseUrl,scope.row.upload_credentials)]"
            :initial-index="0"
            fit="cover">
      </el-image>
      </span>
                          <a v-if="column.prop === 'upload_files'" :href="$fullUrl($banseUrl, scope.row['upload_files'])" target="_blank" style="color: rgb(64, 158, 255)">点击下载</a>
                  <span v-if="column.prop === 'upload_audio'"><a href="javascript:void(0)" @click="upload_audioAudioPlay($fullUrl($banseUrl, scope.row['upload_audio']))">点此播放</a></span>
                  <span v-if="column.prop === 'upload_video'"><a href="javascript:void(0)" @click="upload_videoVideoPlay($fullUrl($banseUrl, scope.row['upload_video']))">点此播放</a></span>
                          <span v-if="column.prop === 'create_time'">{{formatDate(scope.row.create_time)}}</span>
        <span v-if="column.prop === 'update_time'">{{formatDate(scope.row.update_time)}}</span>
      </template>

      <template #tableContent2="{ scope, column }">

                                                                                                <span v-if="column.prop === 'feedback_to_users'"> {{ column.label }}：{{ scope['feedback_to_users']?getObj(list_user_feedback_to_users,scope['feedback_to_users']).nickname+"-"+getObj(list_user_feedback_to_users,scope['feedback_to_users']).username:"" }}</span>
                                                                                                                                  <span v-if="column.prop === 'upload_credentials'">
          {{ column.label }}：
          <el-image
              :preview-teleported="true"
              style="width: 60px; height: 60px"
              :src="$fullUrl($banseUrl, scope.upload_credentials)"
              :preview-src-list="[$fullUrl($banseUrl, scope.upload_credentials)]"
              :initial-index="0"
              fit="cover"
          >
          </el-image>
        </span>
                                                                                                  <span v-if="column.prop === 'upload_files'">  {{ column.label }}<a :href="$fullUrl($banseUrl, scope.upload_files)" target="_blank" style="color: rgb(64, 158, 255)"> 点击下载</a></span>
                                                    <span v-if="column.prop === 'upload_audio'">{{ column.label }}：<a href="javascript:void(0)" @click="upload_audioAudioPlay($fullUrl($banseUrl, scope['upload_audio']))">点此播放</a></span>
                                                    <span v-if="column.prop === 'upload_video'"> {{ column.label }}：<a href="javascript:void(0)" @click="upload_videoVideoPlay($fullUrl($banseUrl, scope['upload_video']))">点此播放</a></span>
                                                                                    <span v-if="column.prop === 'create_time'"> {{ column.label }}：{{formatDate(scope.create_time)}}</span>
        <span v-if="column.prop === 'update_time'"> {{ column.label }}：{{formatDate(scope.update_time)}}</span>
      </template>
    </baseTable>
                      <el-dialog
        title="音频详情"
        v-model="upload_audioAudioPlayerModalVisible"
        width="30%"
    >
      <audio
          id="upload_audioAudioPlayer"
          :src="upload_audioAudioUrl"
          autoplay="autoplay"
          width="100%"
          controls
      >
        您的浏览器不支持Audio标签。
      </audio>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="upload_audioCancelAudioModalVisible"
          >取 消</el-button
          >
        </span>
      </template>
    </el-dialog>
        <el-dialog title="视频详情" v-model="upload_videoPlayerModalVisible" width="30%">
      <video
          id="upload_videoPlayer"
          :src="upload_videoVideoUrl"
          autoplay="autoplay"
          width="100%"
          controls
      >
        您的浏览器不支持Video标签。
      </video>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="upload_videoCancelModalVisible">取 消</el-button>
        </span>
      </template>
    </el-dialog>
        </el-main>
</template>
<script setup>
  import {useRouter} from "vue-router";

  let router = useRouter();
  import {
          $get_auth,
          func,
          paramsFun,
          $fullUrl,
          formatDate,
          $banseUrl,
          $check_action,
          $toTime,
  } from "@/utils/utils.js";
  import { $post, $get } from "@/api/Api.js";
  import {Picture} from "@element-plus/icons-vue";
  import {ElMessage} from "element-plus";
  import {ref, toRefs, computed, onMounted} from "vue"
  import storageHelper from '@/libs/StorageHelper'

  let user_group = storageHelper.getUserInfo().user_group;
  let table = ref("feedback_on_opinions")
  let field = ref("feedback_on_opinions_id")
  let url_get_list = ref("/api/feedback_on_opinions/get_list")
  let url_del = ref("/api/feedback_on_opinions/del")
  // 头部搜索// 搜索
  let formInline = ref({
          "feedback_title": "",
                                "orderby": `create_time desc`
  })
                        // 用户列表
  let list_user_feedback_to_users=ref([])
  //商城卖家用户列表
  let get_list_user_feedback_to_users= async() =>{
    let json = await $get("/api/user/get_list?user_group=注册用户");
    if(json.result){
      list_user_feedback_to_users.value = json.result.list;
    }
    else if(json.error){
      console.error(json.error);
    }
  }
                                        let vm = ref({
                                                                                                                                                        id: "feedback_on_opinions_id"
  })
  // 列名
  const columns =[
          {"prop": "feedback_title", "label": "反馈标题",fieldType:1},
                {"prop": "feedback_type", "label": "反馈类型",fieldType:1},
                {"prop": "feedback_to_users", "label": "反馈用户",fieldType:2},
                {"prop": "refund_type", "label": "退款类型",fieldType:1},
                {"prop": "refund_product", "label": "退款商品",fieldType:1},
                {"prop": "upload_credentials", "label": "上传凭证",fieldType:4},
                {"prop": "more_vouchers", "label": "更多凭证",fieldType:1},
                {"prop": "upload_files", "label": "上传文件",fieldType:4},
                {"prop": "upload_audio", "label": "上传音频",fieldType:4},
                {"prop": "upload_video", "label": "上传视频",fieldType:4},
                {"prop": "feedback_content", "label": "反馈内容",fieldType:1},
              {"prop": "create_time", "label": "创建时间",fieldType:3},
    {"prop": "update_time", "label": "更新时间",fieldType:3},
  ]
  // 刷新table
  let isRefresh = ref(false)
  //批量勾选数据框
  let selectList = ref([])
  //点击数据
  let currentRowTableProduct = ref({})
  let showModal = ref(false)
                    let upload_audioAudioPlayerModalVisible = ref(false);
  let upload_audioAudioUrl = ref("");
  let upload_audioAudioPlay = (v) => {
      upload_audioAudioUrl.value = v;
      upload_audioAudioPlayerModalVisible.value = true;
  };
  let upload_audioCancelAudioModalVisible = () => {
      upload_audioAudioUrl.value = "";
      upload_audioAudioPlayerModalVisible.value = false;
  };
      let upload_videoPlayerModalVisible = ref(false);
  let upload_videoVideoUrl = ref("");
  let upload_videoCancelModalVisible = () => {
      upload_videoPlayerModalVisible.value = false;
      upload_videoVideoUrl.value = "";
  };
  let upload_videoVideoPlay = (v) => {
      upload_videoVideoUrl.value = v;
      upload_videoPlayerModalVisible.value = true;
  };
        // 关闭弹框
  let closeModal = () => {
    showModal.value = false;
  };
  //表格勾选回调
  let handleSelectionChange = (val) => {
    console.log(val)
    selectList.value = val.map((item) => {
      if (item.feedback_on_opinions_id !== undefined) {
        return item.feedback_on_opinions_id
      } else {
        return item
      }
    })
  }
  //点击当前行
  let handleCurrentChangeNew = (val) => {
    currentRowTableProduct.value = val
  }

  // 搜索
  let onSubmit = () => {
    isRefresh.value = true
  }
  // 重置
  let onReset = (refresh) => {
    formInline.value = {
                  "feedback_title": "",
                                                              "create_time": "",
      "orderby": `create_time desc`
    }
    isRefresh.value = refresh
  }
  // 批量删除删除
  let delInfo = () => {
    ElMessageBox.confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          selectList.value.map((item) => {
            delFun(item)
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作',
          })
        })
  }
// 调用删除方法
let delFun = (id) => {
  $get(url_del.value,{feedback_on_opinions_id: id}).then((json) => {
    if (json.result) {
      isRefresh.value = true;
      ElMessage.success("删除成功");
    } else if (json.error) {
      ElMessage.error(json.error);
    }
    isRefresh.value = true;
  });
};
  // 查询数组对象某个是否包含某个值,返回对应对象
  let getObj = (arr, val) => {
    let obj = arr.find((item) => item.user_id == val);
    if (obj) {
        return obj;
    } else {
        return "-";
    }
  };
  onMounted(() => {
                      get_list_user_feedback_to_users()
                                        })
</script>
<style lang="less" scoped>
  .div-form {
    padding: 10px;
  }
</style>